import React, { useEffect, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { Form, Input, Checkbox, Button, Spin, Col, Row, message } from "antd"
import { UserOutlined, LockOutlined } from "@ant-design/icons"
import "./Login.css";
import servicePath from '../../config/apiUrl';
import axios from 'axios';

const Login = (props) => {
    const navigate = useNavigate();
    const [isLoading, setLoading] = useState('')
    const [userName,setUsername] =useState('')
    const [password,setPassword] = useState('')

    //登录
    const checkLogin = () => {
        setLoading(true)
            let dataProps= {
                'username':userName,
                'password':password
            }
            axios({
                method:'post',
                url:servicePath.checklogin,
                data:dataProps,
                withCredentials: true
            }).then(
               res=>{
                    setLoading(false)
                    if(res.data.data=='成功登录'){
                        localStorage.setItem('openId',res.data.openId)
                               navigate('/admin')
                    }else{
                        message.error('用户名密码错误')
                    }
               }
            )
        
       
        setTimeout(()=>{
            setLoading(false)
        },500)

    }
    //得到文章类别信息
    
    return (
        <div className='loginPage'>
            <Row>
                <Col xs={12} sm={14} md={6} lg={13} xl={12} xxl={14}>
                    <div className='login'>
                        <h2 className='loginTitle'>Login</h2>
                        <Spin tip="Loading..." spinning={isLoading} >
                            <Form
                                name="normal_login"
                                className="login-form"
                                initialValues={{
                                    remember: true,
                                }}
                            >
                                <Form.Item
                                    name="username"
                                    rules={[
                                        {
                                            required: true,
                                            message: 'Please input your Username!',
                                        },
                                    ]}
                                >
                                    <Input onChange={(e)=>setUsername(e.target.value)} prefix={<UserOutlined className="site-form-item-icon" />} placeholder="Username" />
                                </Form.Item>
                                <Form.Item
                                    name="password"
                                    rules={[
                                        {
                                            required: true,
                                            message: 'Please input your Password!',
                                        },
                                    ]}
                                >
                                    <Input.Password
                                        prefix={<LockOutlined className="site-form-item-icon" />}
                                        type="password"
                                        placeholder="Password"
                                        onChange={(e)=>setPassword(e.target.value)}
                                    />
                                </Form.Item>
                                <Form.Item>
                                    <Form.Item name="remember" valuePropName="checked" noStyle>
                                        <Checkbox>Remember me</Checkbox>
                                    </Form.Item>

                                    <a className="login-form-forgot" href="">
                                        Forgot password
                                    </a>
                                </Form.Item>

                                <Form.Item>
                                    <Button type="primary" htmlType='submit' className="login-form-button" onClick={checkLogin}>
                                        Log in
                                    </Button>
                                    Or <a href="">register now!</a>
                                </Form.Item>
                            </Form>
                        </Spin>
                    </div>
                </Col>
                <Col xs={0} sm={0} md={0} lg={11} xl={12} xxl={10}>
                    <div className='interview'>
                        <div className='interviewTitle'>个人博客管理系统</div>
                        <h1>发现和创作</h1>
                        <p>原创内容输出，发掘自己深藏的潜力，享受记录，感受分享带来的乐趣</p>
                    </div>
                </Col>
            </Row>
        </div>

    )
}

export default Login